<template>
    <div class="header block">
        <div class="row">
            <div class="search">
                <input
                    type="text"
                    placeholder="请输入工资单名称"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
        </div>
    </div>
    <div class="container block block-alone">
        <el-tabs model-value="detail" >
            <div class="header height-right">
                <div class="search">
                    <button
                        :class="['btn-green','download-btn',accountExpireInfoStatus === 3 ? 'btn-active' : ''] "
                        @click="isBatchPay = true"
                        :disabled="accountExpireInfoStatus === 3"
                    >
                        <i class="el-icon el-icon-download" />
                        上传工资单
                    </button>
<!--                    <button class="btn" @click="onExport">-->
<!--                        <i class="el-icon el-icon-upload2" />-->
<!--                        导出勾选-->
<!--                    </button>-->
                    <export-button style="width: initial" @export="onExport">
                      导出勾选
                    </export-button>
                    <button class="btn btn-red" @click="onDelete">
                        <i class="el-icon el-icon-delete" />
                        删除
                    </button>
                </div>
                <div class=""></div>
            </div>
            <div class="table">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :header-row-style="{ color: '#202536' }"
                    :row-style="{ color: '#5E617D' }"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" />
                    <el-table-column
                        prop="name"
                        label="工资单名称"
                        width="200px"
                    />
                    <el-table-column prop="workYear" label="发薪年份" />
                    <el-table-column label="发薪月份" prop="workMonth" />
                    <el-table-column
                        width="240px"
                        prop="serveCompanyName"
                        label="派送派遣单位名称"
                    />
                    <el-table-column prop="peopleNum" label="人数" />
                    <el-table-column prop="totalMoney" label="发薪总额" />
                    <el-table-column label="发薪明细">
                        <template #default="scope">
                            <p
                                style="color:#1989FA"
                                class="point"
                                @click="
                                    $router.push({
                                        path: '/payroll/detail/' + scope.row.id
                                    })
                                "
                            >
                                查看详情
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pagination"
                    v-model:currentPage="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 30, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="getPayrollList"
                >
                </el-pagination>
            </div>
        </el-tabs>
        <batchPayroll
            v-if="isBatchPay"
            @close="isBatchPay = false"
            @complete="getPayrollList"
            isType="payroll"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BillDetailDto, BillDto } from '@/api/bill'
import { getPayrollList, payrollDelete } from '@/api/payroll'
import { exportPayroll } from '@/api/export'
import batchPayroll from '@/components/batch-payroll.vue'
import user from '../utils/user'
import store from '@/store/index'
import axios from 'axios'
import { downLoadFile } from '../utils/util'
export default defineComponent({
    name: 'Payroll',
    components: {
        batchPayroll
    },
    data () {
        return {
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            accountExpireInfoStatus: 0
        }
    },
    created () {
        this.getPayrollList()
        user.waitLogin().then(() => {
            this.accountExpireInfoStatus = user.accountExpireInfoStatus
            console.log(this.accountExpireInfoStatus, user.accountExpireInfoStatus, '点击啦')
        })
    },
    methods: {
        async getPayrollList () {
            const result = await getPayrollList({
                searchText: this.searchValue,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            })
            this.total = result.total
            this.tableData = result.list
        },
        handleSizeChange () {
            this.pageNum = 1
            this.getPayrollList()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getPayrollList()
        },
        onReset () {
            this.searchText = ''
            this.search()
        },
        handleSelectionChange (selects: { id: string }[]) {
            this.selects = selects.map(item => item.id)
        },
        /**
         * 导出勾选
         */
        async onExport () {
            let type1 = 'download'
            let type2 = 'fileName'
            if (this.selects.length > 1) {
                type1 = 'downloadZip'
                type2 = 'uuid'
            }
            const str = this.selects.join(',')
            const result = await exportPayroll({
                ids: str,
                searchText: this.searchText
            }, {
                loading: true
            })
            if (this.selects.length > 1) {
                result.type = 'Zip'
            }
            console.log(result, 'result')
            if (!result.fileUrl && !result.exportStatus) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
        },
        /**
         * 删除勾选工资单
         */
        async onDelete () {
            const str = this.selects.join(',')
            if (str.length === 0) {
                this.$message.warning('请至少选择一个！')
                return
            }
            await payrollDelete(str)
            this.getPayrollList()
            this.$message.success('删除成功！')
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px

.value.important
    color color-red
    font-style italic
:deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px
:deep().el-tabs__nav-scroll
    padding-right 20px
.height-right
    float: right
.download-btn
    width: 126px !important;
.btn-active
    background #ccc
.btn-red
    background: #FF7E68
.el-tabs__header
    margin: 0
.block-alone
    padding: 0 24px 0
</style>
